import {
  CreditCardOutlined,
  MoneyCollectOutlined,
  TransactionOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Card, Col, Row, Statistic } from 'antd';
import { useEffect, useState } from 'react';
import ExportTradeReport from './ExportTradeReport';

function AdminHome() {
  const [customerCount, setCustomerCount] = useState<number>(0);
  const [cardCount, setCardCount] = useState<number>(0);
  const [tradeCount, setTradeCount] = useState<number>(0);
  const [tradeSum, setTradeSum] = useState<number>(0);

  useEffect(() => {
    fetch('http://localhost:8000/statistics/admin/customer_count')
      .then((res) => res.json())
      .then((data) => setCustomerCount(data.customer_count || 0));
    fetch('http://localhost:8000/statistics/admin/card_count')
      .then((res) => res.json())
      .then((data) => setCardCount(data.card_count || 0));
    fetch('http://localhost:8000/statistics/admin/trade_count')
      .then((res) => res.json())
      .then((data) => setTradeCount(data.trade_count || 0));
    fetch('http://localhost:8000/statistics/admin/trade_sum')
      .then((res) => res.json())
      .then((data) => setTradeSum(data.trade_sum || 0));
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <ExportTradeReport />
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="客户总数"
              value={customerCount}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="银行卡总数"
              prefix={<CreditCardOutlined />}
              value={cardCount}
              precision={2}
            />
          </Card>
        </Col>
      </Row>
      <Row gutter={16} style={{ marginTop: '20px' }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="交易量"
              value={tradeCount}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
              prefix={<TransactionOutlined />}
              suffix="元"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="交易总额"
              value={tradeSum}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
              prefix={<MoneyCollectOutlined />}
              suffix="元"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default AdminHome;
